<template>
  <div class="axiom-tag" :class="tagClasses">
    <!-- 左侧区域：可以放图标或其他装饰 -->
    <div v-if="$slots.left" class="axiom-tag__left">
      <slot name="left"></slot>
    </div>
    
    <!-- 中间内容区域：标签文字 -->
    <div class="axiom-tag__content">
      <slot>
        <span class="axiom-tag__label">{{ label }}</span>
      </slot>
    </div>
    
    <!-- 右侧区域：额外内容和删除按钮 -->
    <div v-if="$slots.right || closable" class="axiom-tag__right">
      <slot name="right"></slot>
      <!-- 现代化的删除按钮 -->
      <AxiomIcon
        v-if="closable"
        name="times"
        class="axiom-tag__close-btn"
        @click.stop="handleClose"
        :title="closeTooltip"
      />
    </div>
  </div>
</template>

<script>
import AxiomIcon from './AxiomIcon.vue';

export default {
  name: 'AxiomTag',
  components: {
    AxiomIcon
  },
  // mixins: [GlobalUtilsMixin],
  props: {
    label: {
      type: String,
      required: false, // 允许 label 为可选，优先使用 slot
    },
    closable: {
      type: Boolean,
      default: false,
    },
    closeTooltip: {
      type: String,
      default: '移除',
    },
    type: {
      type: String,
      default: 'primary', // primary, success, info, warning, danger, default, gradient
      validator: (value) =>
        ['primary', 'success', 'info', 'warning', 'danger', 'default', 'gradient', 'outline'].includes(value),
    },
    size: {
      type: String,
      default: 'medium', // small, medium, large
      validator: (value) => ['small', 'medium', 'large'].includes(value),
    },
    variant: {
      type: String,
      default: 'filled', // filled, outline, soft
      validator: (value) => ['filled', 'outline', 'soft'].includes(value),
    },
  },
  emits: ['close'],
  computed: {
    tagClasses() {
      return [
        `axiom-tag--${this.type}`,
        `axiom-tag--${this.size}`,
        `axiom-tag--${this.variant}`,
        {
          'is-closable': this.closable,
        },
      ]
    },
  },
  created() {
    // this.logger.debug('AxiomTag 组件初始化', {
    //   label: this.label,
    //   type: this.type,
    //   size: this.size,
    //   closable: this.closable,
    // })
  },
  methods: {
    handleClose() {
      // this.logger.debug('标签被关闭', { label: this.label, type: this.type })
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-tag';
</style> 